<!--
 * @Description: 
 * @Author: chenju
 * @Date: 2022-03-22 17:08:41
 * @LastEditors: chenju
 * @LastEditTime: 2023-01-17 16:03:49
-->
<template>
  <CDialog
    title="成员列表"
    destroy-on-close
    v-model:visible="dialogVisible"
    :show-cancel-button="false"
    @confirm="dialogVisible = false"
    confirm-text="关闭"
    :footer="false"
  >
    <div v-loading="loading">
      <div class="g-mb8 g-flex-between-center">
        <span class="g-font-14n1">角色名称：{{ dataRole.roleName }}</span>
        <el-button @click="handleAddUser">添加账号</el-button>
      </div>
      <CTable
        ref="memberListRef"
        border
        :load-data="loadData"
        :pagination="{
          teleport: '#factor-simple-page',
          layout: 'total, prev, slot, next'
        }"
      >
        <vxe-column title="成员名称" width="120" show-overflow="tooltip">
          <template #default="scope">
            <span>{{ empty(scope.row.realName) }}</span>
          </template>
        </vxe-column>
        <vxe-column title="成员邮箱" show-overflow="tooltip">
          <template #default="scope">
            <span>{{ empty(scope.row.email) }}</span>
          </template>
        </vxe-column>
        <vxe-column title="用户角色" show-overflow="tooltip">
          <template #default="scope">
            <span>{{ empty(scope.row.roleName) }}</span>
          </template>
        </vxe-column>
        <vxe-column title="操作" width="80">
          <template #default="scope">
            <CTableButtonGroup :buttons-config="getTableButtonsConfig(scope.row)" />
          </template>
        </vxe-column>
      </CTable>
      <div class="page-wrap">
        <div id="factor-simple-page"></div>
      </div>
    </div>
    <CSelectUserDialog
      v-model:visible="addUserVisible"
      @confirm="handleAddUserConfirm"
    ></CSelectUserDialog>
  </CDialog>
</template>
<script lang="ts">
export default {
  name: 'MemberListDialog'
};
</script>
<script lang="ts" setup>
import { defineProps, withDefaults, defineEmits, computed, ref } from 'vue';
import { CDialog } from '@/components/CDialog';
import CSelectUserDialog from '@/businessComponents/CSelectUserDialog/index.vue';
import { CTableButtonGroup, CTable, LoadDataParams, TableButtonItem } from '@/components/CTable';
import { empty } from '@/utils/index';
import { getRoleUserList, postAddUserRole, postDeleteUserRole } from '@/apis/system/role';
import { store } from '@/store';
import { useMessage } from '@/hooks/useMessage';

interface MemberListDialogProps {
  visible: boolean;
  dataRole: any;
}
const props = withDefaults(defineProps<MemberListDialogProps>(), {});
const emit = defineEmits(['update:visible', 'refresh']);
const { createMessage, createConfirm } = useMessage();
const dialogVisible = computed<boolean>({
  get: () => {
    return props.visible;
  },
  set: val => {
    emit('update:visible', val);
  }
});
const memberListRef = ref();
const loading = ref();
function loadData({ current, size }: LoadDataParams) {
  const params = {
    roleId: props.dataRole.id,
    current,
    size
  };
  return getRoleUserList(params);
}

// 当前登录用户
const userId = computed(() => {
  return store.state.user.userInfo.userId;
});

const addUserVisible = ref(false);
function handleAddUser() {
  addUserVisible.value = true;
}

async function handleAddUserConfirm(id: string) {
  try {
    await postAddUserRole(props.dataRole.id, id);
    createMessage.success('新增成功！');
    addUserVisible.value = false;
    refresh();
  } catch (error) {
    console.log('error', error);
  }
}

// 点击删除用户操作
const deleteUser = (row: any) => {
  createConfirm('确定删除账号吗？', '删除后无法恢复！', {
    iconType: 'warning'
  }).then(() => {
    console.log('row', row);
    loading.value = true;
    postDeleteUserRole(props.dataRole.id, row.id)
      .then(() => {
        createMessage.success('删除成功！');
        loading.value = false;
        refresh();
      })
      .catch(() => {
        loading.value = false;
      });
  });
};

function refresh() {
  memberListRef.value?.refresh();
  emit('refresh');
}

/**
 * 配置表格的按钮
 * @param row 表格行数据
 */
function getTableButtonsConfig(row: any): TableButtonItem[] {
  return [
    {
      text: '删除',
      disabled: row.userId === userId.value,
      onClick: () => deleteUser(row)
    }
  ];
}
</script>

<style lang="scss">
.vxe-table--tooltip-wrapper {
  z-index: 4000 !important;
  min-width: 100px;
}
.page-wrap {
  display: flex;
  justify-content: flex-end;
  padding-bottom: 24px;
  margin-top: 8px;
}
</style>
